/*
* @Author: Yejing
* @Date: 2023-06-14 13:59:45
* @LastEditors: Yejing
* @LastEditTime: 2023-07-03 13:54:30
* @Description: 主播控制台
*/
<template>
	<view class="anchor-console-page">
		<c-layout @getNewsData="getNewsData">

			<c-navigation-bar :title="$t('user.AnchorConsole')" slot="head" @backEvent="goBack">
				<template slot="rightIcon">

				</template>
			</c-navigation-bar>
			<view class="container-box">

				<!--    直播类型    -->
				<uni-popup ref="popupLiveType" class="unipopup" type="bottom" :mask="false" animation background-color="#fff"
					safe-area:true>
					<view class="hourList">
						<view class="box_allo_say">
							<view class="box_goods_live" @click="clickGoodsLive">
								<view
									style="width: 88rpx;height: 88rpx;border-radius: 20rpx;background-color: #F4F4F4;display: flex;align-items: center;justify-content: center">
									<image src="/static/images/user/icon_live_left.png" style="width: 52rpx;height: 34rpx" />
								</view>
								<text style="margin-top: 25rpx;color: #1E2432;font-size: 30rpx">{{ $t('user.live_goods') }}</text>
							</view>
							<view class="box_happy_live" @click="clickHappyLive">
								<view
									style="width: 88rpx;height: 88rpx;border-radius: 20rpx;background-color: #F4F4F4;display: flex;align-items: center;justify-content: center">
									<image src="/static/images/user/icon_live_right.png" style="width: 44rpx;height: 42rpx" />
								</view>
								<text style="margin-top: 25rpx;color: #1E2432;font-size: 30rpx">{{ $t('user.happy_live') }}</text>

							</view>
						</view>
					</view>

				</uni-popup>

				<view class="user" v-show="false"><!--隐藏主播信息-->
					<view class="info">
						<view class="" style="display: flex;align-items: center;">
							<u-avatar size="150" :src="$u.file.getMedieUrl(basicInfo.anchorAvatar)"></u-avatar>
							<view class="infoName">
								{{ vuex_user_info.nickName }}
							</view>
						</view>
						<image @click="anchorEdit()" style="width: 48rpx;height: 48rpx;" src="@/static/svg/bag-edit.svg" mode="">
						</image>
					</view>
					<!--                    <u-icon name="edit-pen" size="38"></u-icon>-->
				</view>
				<!--开始直播-->
				<view class="bank-card" style="background-color: #0043ca;color: #fff;margin-bottom: 30rpx;"
					@click="goLivePusher">
					<image src="/static/images/user/icon_liver.png" style="width: 44rpx;height: 32rpx;"></image>
					<text style="font-size: 40rpx;color: white;margin-left: 20rpx">{{ $t('storeManagement.GoLive') }}</text>
				</view>
				<!--余额和收益-->
				<view class="back_card_total">
					<!--    账户余额和主播收益      -->
					<view class="box_account_money_anchor_get">

						<p style="position: absolute;right: 10px;top: 10px;" @click="onreset()"><u-image width="20px" height="20px"
								src='../../static/images/refresh.png'></u-image> </p>
						<!--      账户余额      -->
						<view class="box_user_money">
							<text class="text_account_money">${{ Number(basicInfo.anchorBalance).toFixed(2) }}</text>
							<text class="text_tips_money">{{ $t('user.accountBalance') }}</text>
						</view>
						<!--      主播收益      -->
						<view class="box_anchor_money">
							<text class="text_account_money">${{ Number(anchorGet).toFixed(2) }}</text>
							<text class="text_tips_money">{{ $t('user.anchor_get') }}</text>
						</view>
					</view>
					<!--    查看当日收益      -->
					<view class="box_see_day_money">
						<view style="background-color: #E5E5E5;color: #fff;height: 1rpx;width: 100%;margin-top: 40rpx" />
						<!--    查看当日收益      -->
						<view class="box_current_day_money" @click="clickSeeCurrentMoney(true)" v-show="!showCurrentDayMoney">
							<text class="see_money">{{ $t('user.see_today_get') }}</text>
						</view>

						<view class="box_current_money_content" v-show="showCurrentDayMoney">
							<!--      当前收益      -->
							<view class="box_current_total">
								<text class="text_money_get">{{ $t('user.today_get') }}</text>
								<text class="text_tips_money_get">{{ $t('user.contain_goods_gift') }}</text>
							</view>
							<text class="text_money_get text_type_bold">${{ Number(dayGet).toFixed(2) }}</text>

							<!--      带货收益      -->
							<view class="box_goods_get">
								<text class="text_money_get">{{ $t('user.goods_get') }}</text>
								<text class="text_money_get">
									{{ $t('user.total') }}:${{ Number(goodsTotalGet).toFixed(2) }}|{{ $t('user.today') }}:${{ Number(goodsDayGet).toFixed(2) }}
								</text>
							</view>
							<!--      直播收益      -->
							<view class="box_live_get">
								<text class="text_money_get">{{ $t('user.gift_get') }}</text>
								<text class="text_money_get">
									{{ $t('user.total') }}:${{ Number(giftTotalGet).toFixed(2) }}|{{ $t('user.today') }}:${{ Number(giftDayGet).toFixed(2) }}
								</text>
							</view>
							<view class="box_current_day_money" @click="clickSeeCurrentMoney(false)">
								<text class="hidden_money">{{ $t('user.close_up') }}</text>
							</view>
						</view>


					</view>
				</view>
				<!--                集合-->
				<view class="t-card">
					<view class="card" @click="anchorFansPageClick">
						<u-image height="64rpx" width="64rpx" src="@/static/images/Heart@2x.png"></u-image>
						{{ $t('anchorConsole.fansClub') }}
					</view>
					<view class="card" @click="$u.route('/pages/storyType/storeManagement/batchorders',{type:'anchor'})">
						<u-image height="64rpx" width="64rpx" src="@/static/images/Paper@2x.png"></u-image>
						{{ $t('anchorConsole.TaskRecord') }}
					</view>
				</view>
				<!--                图表-->
				<view class="echarts">
					<view class="date" style="justify-content: flex-end;margin-bottom: 10px;">
						<uni-data-select :clear="false" v-model="businessValue" :localdata="businessData" @change='changeBusiness'>
						</uni-data-select>
					</view>
					<view class="date">
						<text>
							{{ dateValue == 1 ? `${$t('anchorConsole.Thisweek')},${week.start_day}-${week.end_day} ` : `${$t('anchorConsole.ThisMonth')},${month.start_day}-${month.end_day} ` }}
							{{ nowMonth }}
						</text>
						<uni-data-select :clear="false" v-model="dateValue" :localdata="dateData"
							@change="changeDate"></uni-data-select>
					</view>

					<view class="charts-box">
						<qiun-data-charts canvas2d type="line" :disableScroll="false" :chartData="echarts.chartData"
							:opts="echarts.opts" />
					</view>
				</view>
				<view class="button-group">


					<u-button @click="$u.route('pages/anchorConsole/page/taskHall',{type:'anchorLook'})">
						<u-image height="24rpx" width="26rpx" src="@/static/images/listmo.png"></u-image>
						{{ $t('anchorConsole.LiveTaskHall') }}
					</u-button>
				</view>

				<view class="plan-list">
					<view class="line">
						<view class="left">
							<u-image height="34rpx" width="28rpx" src="@/static/images/Paper@2f.png"></u-image>
							{{ $t('anchorConsole.CarryingTaskList') }}
						</view>
						<text @click="$u.route('/pages/storyType/storeManagement/batchorders',{type:'anchor'})">
							{{ $t('anchorConsole.all') }}
						</text>
					</view>
					<!--带货任务列表-->
					<view class="info">
						<view class="li" v-for="item in sellTaskList" :key="item.id"
							@click="toTask(item)">
							<view class="left">
								<text>{{ item.taskName }}</text>
							</view>
							<view class="right">

								{{publicJS.timeZoneSwitching(item.createTime)}}
								<view>
									{{ $t('anchorConsole.incomingTask') }}
									<u-icon name="arrow-rightward"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!--        <TaskList/>-->

			</view>

		</c-layout>
		<u-mask :show="isShowLoading">
			<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
				<u-loading mode="flower" size="60" />
			</view>
		</u-mask>
	</view>
</template>

<script>
	import TaskList from './TaskList.vue';

	export default {
		data() {
			return {


				anchorGet: 0, //主播收益
				dayGet: 0, //当日收益
				giftDayGet: 0, //直播礼物当日收益
				giftTotalGet: 0, //直播礼物总收益
				goodsDayGet: 0, //直播带货当日收益
				goodsTotalGet: 0, //直播带货总收益
				showCurrentDayMoney: false, //展示主播当日收益
				textDaySee: '查看当日收益',
				//统计图
				echarts: {
					chartData: {},
					opts: {

						legend: {
							show: false
						},


						xAxis: {

							disabled: true,

						},
						yAxis: {
							type: 'value'
						},
					}
				},
				dateValue: 1,
				dateData: [{
					text: this.$t('anchorConsole.week'),
					value: 1,
				}, {
					text: this.$t('anchorConsole.day'),
					value: 2,
				}, ],
				businessValue: 'ljxzfs',
				businessData: [{
						text: this.$t('anchorConsole.AccumulatedNewFans'),
						value: 'ljxzfs',
					},
					{
						text: this.$t('anchorConsole.CumulativeOrders'),
						value: 'ljcjdd',
					},
					{
						text: this.$t('anchorConsole.transactions'),
						value: 'ljcjrs',
					},
					{
						text: this.$t('anchorConsole.turnoverRate'),
						value: 'cjzhl',
					},
					{
						text: this.$t('anchorConsole.SingleField'),
						value: 'dczgrs',
					},
					{
						text: this.$t('anchorConsole.viewership'),
						value: 'ljgkrs',
					},
					{
						text: this.$t('anchorConsole.PercentageFans'),
						value: 'cjfszb',
					},
					{
						text: this.$t('anchorConsole.FansrepurchaseRate'),
						value: 'fsfgl',
					},
					{
						text: this.$t('anchorConsole.PerCapitaViewingTime'),
						value: 'rjgksc',
					},
				],
				taskList: [{
						time: ' 2020.06.05',
						name: '手机带货'
					},
					{
						time: ' 2020.06.05',
						name: '手机带货'
					}
				],
				paging: {
					pageSize: 2,
					pageNum: 1
				},
				basicInfo: {
					anchorAvatar: '',
					nickName: ''
				},
				//带货任务列表
				sellTaskList: [],
				week: {},
				month: {},
				nowMonth: '',

				// 全屏loading
				isShowLoading: false,
			};
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.webview.currentWebview().setStyle({ popGesture: 'none' });
			// #endif 
		},
		onLoad() {
			//获得本周的开始时间：
			let now = new Date(); // 当前日期

			let nowDay = now.getDate(); // 当前日
			switch (now.getMonth() + 1) {
				case 1:
					this.nowMonth = 'Jan'
					break;
				case 2:
					this.nowMonth = 'Feb'
					break;
				case 3:
					this.nowMonth = 'Mar'
					break;
				case 4:
					this.nowMonth = 'Apr'
					break;
				case 5:
					this.nowMonth = 'May'
					break;
				case 6:
					this.nowMonth = 'Jun'
					break;
				case 7:
					this.nowMonth = 'Jul'
					break;
				case 8:
					this.nowMonth = 'Aug'
					break;
				case 9:
					this.nowMonth = 'Sep'
					break;
				case 10:
					this.nowMonth = 'Oct'
					break;
				case 11:
					this.nowMonth = 'Nov'
					break;
				case 12:
					this.nowMonth = 'Dec'
					break;

				default:
					break;
			} // 当前月


			// 获取本周、月开始日期。结束日期
			this.getCurrentDay()

			//获取带货任务列表
			this.getSellTaskList(this.paging)
			//获取基本信息

			this.$u.get('/app/anchor/anchorInfo/' + this.vuex_user_info.id).then(r => {
				this.basicInfo = r.data

			})
			this.getEchars(this.dateValue, this.businessValue)
			this.getAnchorMoney()
		},
		onShow() {
			this.getAnchorMoney()
		},
		methods: {




			//获取主播收益
			getAnchorMoney() {
				this.$u.get('/app/anchor/incomeInformation').then(res => {
					console.log("===z res=" + JSON.stringify(res));
					//     anchorGet: 0,//主播收益
					//     dayGet: 0,//当日收益
					//     giftDayGet: 0,//直播礼物当日收益
					//     giftTotalGet: 0,//直播礼物总收益
					//     goodsDayGet: 0,//直播带货当日收益
					//     goodsTotalGet: 0,//直播带货总收益
					this.anchorGet = res.data.totalRevenue;
					this.dayGet = res.data.totalIncomeOfTheDay;
					this.goodsTotalGet = res.data.grossProceedsFromSales;
					this.goodsDayGet = res.data.daySalesRevenue;
					this.giftTotalGet = res.data.grossGiftProceeds;
					this.giftDayGet = res.data.dayGiftIncome;
				})
			},
			onreset() {
				this.isShowLoading = true
				this.$u.get('/app/anchor/anchorInfo/' + this.vuex_user_info.id).then(res => {
					this.basicInfo = r.data
					setTimeout(() => {
						this.isShowLoading = false
					}, 1500)


				}).catch(e => {
					setTimeout(() => {
						this.isShowLoading = false
					}, 1500)

				})

			},
			//点击查看主播当天收益
			clickSeeCurrentMoney(show) {
				this.showCurrentDayMoney = show;
			},
			//点击带货直播
			clickGoodsLive() {
				this.$refs.popupLiveType.close();
				uni.navigateTo({
					url: `/pages/anchorConsole/TaskListPage/TaskListPage`,
				});
			},
			//点击娱乐直播
			clickHappyLive() {

				// uni.navigateTo({
				//   url: `/pages/liveBar/qingpin/qingpin`,
				//   animationType: 'slide-in-right',
				//   animationDuration: 300
				// });


				uni.navigateTo({
					url: `/pages/liveBar/livePusher/livePusher?type=1`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});



				// uni.showToast({
				// 	title: this.$t('system.comingSoon'),
				// 	icon: 'none'
				// })

				this.$refs.popupLiveType.close();
			},
			goBack() {
				console.log(111)
				uni.switchTab({
					url: "/pages/user/user"
				})
			},
			goLivePusher() {
				//带货直播/娱乐直播
				let environment = uni.getSystemInfoSync().uniPlatform;
				if (environment == 'app') {
					//打开直播类型弹框
					this.$refs.popupLiveType.open();
				} else {
					uni.showToast({
						title: this.$t('product.goMobile'),
						icon: 'none'
					});
				}

			},
			//获取echarts
			getEchars(type, business) {
				let categories = type == 1 ? ["1", "2", "3", "4", "5", "6", "7"] : ["1", "2", "3", "4", "5", "6", "7",
					"8", "9", "10", "11", "12",
					"13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24",
					"25", "26", "27", "28", "29", "30", "31"
				]
				//加载echarts
				this.$nextTick(() => {
					this.$u.get(`/app/anchor/comprehensiveData/${type}/${business}`).then(r => {
						let res = {
							categories: categories,
							series: [{
									name: this.$t('anchorConsole.number'),
									data: r.data.dataList,
									legendShape: 'circle'

								},


							]
						};
						this.echarts.chartData = JSON.parse(JSON.stringify(res));
					})
				})


			},
			//获取带货任务列表
			getSellTaskList(paging) {
				this.$u.post('/app/anchor/sell/task/anchorSellTaskList', paging).then(res => {
					console.log('带货任务列表', res);
					this.sellTaskList = [...this.sellTaskList, ...res.data.records].filter(function(
						element, index,
						self) {
						return self.findIndex(el => el.id == element.id) === index
					})
					this.total = res.data.total
				})
			},
			//获取基本信息
			getBasicInfo() {
				this.$u.get('/app/anchor/anchorInfo/' + this.vuex_user_info.id).then(res => {
					this.basicInfo = res.data
				})
			},
			//分页
			getNewsData() {
				if (this.sellTaskList.length == this.total) {
					return
				}
				this.paging.pageNum += 1
				this.getSellTaskList(this.paging)
			},
			changeBusiness(val) {
				this.getEchars(this.dateValue, val)
			},
			changeDate(val) {
				this.getEchars(val, this.businessValue)
			},
			// //点击主页
			// anchorHomePageClick() {
			// 	this.$u.route('/pages/searchInfo/components/anchorCard/anchorHomepage/index')
			// 	this.$u.vuex('vuex_anchor_info', this.basicInfo)
			// },
			//点击修改
			anchorEdit() {
				this.$u.route('/pages/anchorConsole/page/editAnchor')
				this.$u.vuex('vuex_anchor_info', this.basicInfo)
			},
			//点击粉丝团
			anchorFansPageClick() {
				this.$u.route('/pages/anchorConsole/page/fansClub')
			},
			// 查看任务
			toTask(item){
				uni.setStorageSync('taskName', item.taskName)
				this.$u.route('/pages/anchorConsole/page/taskDetails',{type:'applyKb',taskId:item.id})
			},
			getCurrentDay(currentDate) {
				let thisweek = {}
				let thisMonth = {}
				let thisYear = {}
				let date = new Date();
				// 本周一的日期
				date.setDate(date.getDate() - date.getDay() + 1);
				thisweek.start_day = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
				// 本周日的日期
				date.setDate(date.getDate() - date.getDay() + 7);
				thisweek.end_day = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());

				// 本月第一天
				date.setDate(1);
				thisMonth.start_day = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
				// 本月最后一天
				var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
				thisMonth.end_day = (lastDay.getDate() < 10 ? "0" + lastDay.getDate() : lastDay.getDate())


				this.week = thisweek
				this.month = thisMonth
			},


		},
		components: {
			TaskList,
		},
	}
</script>


<style lang="scss" scoped>
	.anchor-console-page {
		.top {
			padding: 56rpx;

			.title {
				display: flex;
				justify-content: space-between;

				uni-text {
					font-size: 72rpx;
					font-weight: 400;
					color: #02010E;
				}
			}

		}

		.user {
			display: flex;
			justify-content: space-between;

			margin-bottom: 50rpx;

			.info {
				display: flex;
				align-items: center;
				color: #02010E;
				justify-content: space-between;
				width: 100%;

				.infoName {
					font-size: 48rpx;
					font-family: Avenir-Heavy-Regular, Avenir-Heavy;
					font-weight: 400;
					color: #02010E;
					margin-left: 22rpx;
					line-height: 58rpx;
				}

				.u-avatar {
					margin-bottom: 20rpx;

				}
			}
		}

		.bank-card {
			width: 100%;
			padding: 44rpx 48rpx;
			background: #FFFFFF;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.left {
				color: #91909A;
				font-size: 36rpx;
				display: flex;
				align-items: center;

				.u-image {
					margin-right: 18rpx;
				}
			}

			.right {
				font-size: 48rpx;
			}
		}

		.back_card_total {
			width: 100%;
			padding: 30px 20px;
			position: relative;
			background: #FFFFFF;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			flex-direction: column;

			.box_see_day_money {
				display: flex;
				flex-direction: column;
				align-items: center;

				.box_current_money_content {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					width: 100%;
				}

				.text_money_get {
					font-size: 28rpx;
					color: #1B1D29;
				}

				.text_type_bold {
					font-weight: bold;
				}

				.text_tips_money_get {
					font-size: 24rpx;
					color: #919191;
					margin-top: 2rpx;
				}

				.box_current_total {
					display: flex;
					flex-direction: row;
					margin-top: 40rpx;
					justify-content: left;
				}

				.box_goods_get {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 28rpx;
				}

				.box_live_get {
					margin-top: 26rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

			}

			/*账户余额和主播收益*/
			.box_account_money_anchor_get {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.box_user_money {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: 20rpx;
				}

				.box_anchor_money {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}

				.text_account_money {
					color: #1B1D29;
					font-size: 48rpx;
					font-weight: bold;
				}

				.text_tips_money {
					color: #1B1D29;
					font-size: 30rpx;
				}

			}


			.box_current_day_money {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 32rpx;

				.see_money {
					color: #2934D0;
					font-size: 28rpx;
				}

				.hidden_money {
					color: #91909A;
					font-size: 28rpx;
				}
			}
		}

		/*主播当日收益 直播礼物收益 直播带货收益*/
		.box_show_all_money {
			width: 100%;
			padding: 24rpx 20rpx;
			background: #FFFFFF;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;

			/*当日收益*/
			.current_get {
				border-radius: 10rpx;
				padding: 24rpx 20rpx;
				border: 1px solid #4953ED;

				.text_day_get {
					font-size: 36rpx;
				}

				.text_tips_day_get {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #91909A;
				}

			}

			.live_goods_get {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20rpx;

				.box_gift {
					width: 49%;
					padding: 16rpx;
					border-radius: 10rpx;
					border: 1px solid #4953ED;
					opacity: 1;
					font-size: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

				}

			}

		}

		.box_money_get {
			margin-top: 30rpx;
		}

		.bank-card-money {
			width: 100%;
			background: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			.left {
				color: #91909A;
				font-size: 36rpx;
				display: flex;
				align-items: center;

				.u-image {
					margin-right: 18rpx;
				}
			}

			.right {
				font-size: 48rpx;
			}
		}

		.t-card {
			display: flex;
			justify-content: space-between;
			margin: 40rpx 0;

			.card {
				width: 49%;
				padding: 36rpx;
				background: linear-gradient(90deg, #F9934A 0%, #FBC47A 100%);
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				color: #fff;
				font-size: 32rpx;

				.u-image {
					margin-bottom: 18rpx;
				}

				&:nth-child(2) {
					background: linear-gradient(90deg, #2934D0 0%, #92A6F7 100%);
					box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
				}
			}
		}

		.echarts {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			opacity: 1;
			padding: 56rpx 24rpx;

			.date {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 50rpx;

				uni-text {
					width: 90%;
					color: #91909A;
					font-size: 32rpx;
				}

				/deep/ .uni-stat__select {
					flex: unset;
					width: unset;
				}

				/deep/ .uni-select {
					width: 320rpx;
					border: 1px solid #4953ED;

					.uni-select__input-text {
						color: #4953ED;
					}

					.uni-icons {
						color: #4953ED !important;
					}
				}
			}

			.charts-box {
				width: 100%;
				height: 500rpx;
				flex: 1;

				.charts {
					height: 100%;
					width: 100%;
				}
			}
		}

		.button-group {
			margin: 40rpx 0;
			font-size: 32rpx;

			.u-btn {
				width: 100%;
				background: #2934D0;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				margin-bottom: 20rpx;
				padding: 38rpx 94rpx;
				color: #fff;
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);

				/deep/ uni-image {
					position: absolute;
					right: 20rpx;
				}

				&:nth-child(2) {
					background: #FFFFFF;
					color: #91909A;

				}
			}
		}

		.plan-list {
			padding-bottom: 48rpx;

			.line {
				display: flex;
				justify-content: space-between;
				margin-bottom: 28rpx;

				.left {
					font-size: 32rpx;
					display: flex;
					align-items: center;

					.u-image {
						margin-right: 18rpx;
					}
				}

				uni-text {
					font-size: 22rpx;
					color: #2934D0;
				}
			}

			.info {
				font-size: 24rpx;

				.li {
					display: flex;
					justify-content: space-between;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #E1E8E8;
					padding: 24rpx;
					margin-bottom: 20rpx;

					.left {
						max-width: 100px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.right {
						width: 410rpx;
						display: flex;
						justify-content: space-between;
						color: #2934D0;

						.u-icon {
							margin-left: 20rpx;
						}

						uni-text {
							&:nth-child(1) {
								color: #666666;
							}

						}
					}
				}
			}
		}

		.head-right-font {
			position: relative;
			font-size: 30rpx;
			color: #9999FF;
			font-weight: 800;

			:after {
				position: absolute;
				bottom: -8rpx;
				width: 30%;
				height: 6rpx;
				background: #CCCCFF;
				content: '';
				left: 50%;

				transform: translateX(-50%);
				box-shadow: 0 0 80rpx 40rpx rgba(0, 0, 255, .2);
			}
		}


		.box_allo_say {
			height: 314rpx;
			width: 750rpx;
			background: #ffffff;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.box_goods_live {
				margin-left: 40rpx;
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.box_happy_live {
				margin-right: 40rpx;
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

		}

	}

	.unipopup {
		position: fixed;
		left: 0;
		bottom: -20rpx;
	}

	.hourList {
		height: 370rpx;
		width: 750rpx;
		padding-top: 40rpx;
		background: #ffffff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
	}
</style>